<template>
  <div class="mainBox">
      <div class="container">
        <el-form :model="form" ref="addForm" label-width="120px" style="width:400px;">
          <el-form-item label="工作时间段" >
            <el-time-picker
              is-range
              v-model="dateTimeLimit"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="dateTimeChange"
              value-format="HH:mm:ss"
              style="width:100%"
              :clearable='false'
              >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="当天成功率"  class="percentBox">

            <el-progress type="circle" :percentage="form.today_task_success_rate" :width="60" color="rgb(19, 206, 102)"></el-progress>
            <!--
            <el-input v-model="form.today_task_success_rate" placeholder="" style="width:40%" auto-complete="off" value="0"  :disabled="true">
              <template slot="append">%</template>
            </el-input>
            -->
          </el-form-item>
          <el-form-item label="状态">
            <el-switch 
              v-model="form.global_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              >
              </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">保存设置</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>


<script>
import { mapGetters, mapActions } from 'vuex'
import {getWorkingPeriod, updateWorkingPeriod} from '@/api/systemSettings'
export default{
  data() {
    return {
      dateTimeLimit: [],//日期时间范围区间
      form:{
        work_start_time: '',
        work_end_time: '',
        global_status: true,
        today_task_success_rate: 0
      },
      rules: {
       
      },
    }
  },
  created(){
    this.getWorkingPeriodData()
  },
  methods: {
    getWorkingPeriodData(){
      getWorkingPeriod(response=> {
        const res = response.data
        if(res.code == 1){
          if(res.data.work_start_time && res.data.work_end_time){
            this.dateTimeLimit.push(res.data.work_start_time)
            this.dateTimeLimit.push(res.data.work_end_time)
            this.form.work_start_time = res.data.work_start_time
            this.form.work_end_time = res.data.work_end_time
          }
          this.form.global_status = res.data.global_status
          this.form.today_task_success_rate = res.data.today_task_success_rate
        }
      })
    },
    dateTimeChange(val){ //时间区间
      // console.log(val)
      this.form.work_start_time = val[0]
      this.form.work_end_time = val[1]
    },
    //保存
    submitForm(formName) {
      updateWorkingPeriod(this.form ,response=> {
        const res = response.data
        if(res.code == 1){
          this.$message.success('设置成功')
          this.setWorkTime([this.form.work_start_time, this.form.work_end_time])
        }
      })
    },
     //重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    ...mapActions([
      'setWorkTime'
    ])
  },
  computed: {
    ...mapGetters([
      'workTime'
    ])
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .mainBox{
    padding: 0px;
    margin-bottom: 20px;
  }
  .container {
    margin: 10px 0px;
  }
</style>
<style rel="stylesheet/scss" lang="scss" >
  .percentBox .el-form-item__label{
    line-height: 60px;
  }
  .el-date-editor .el-range-separator {
      width: 10%;
  }
</style>
